<template>
  <div class="page-top">
		<el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next, sizes"
      :current-page.sync="pageData.pageNum"
      :page-size="pageData.pageSize"
      :total="pageData.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  components: {},
  data() {
    return {};
  },
  props: {
    pageData: {
      pageNum: 0,
      pageSize: 20,
      total: 0,
    }
  },
  methods: {
		handleSizeChange(val) {
      this.$emit("pageSize", `${val}`);
    },

		handleCurrentChange(val) {
      this.$emit("pageNum", `${val}`);
		}
	}
};
</script>

<style  scoped>
  .page-top{
    margin: 20px 0;
    text-align: right;
  }

  .el-pagination >>> .el-pagination__total{
    margin-right: 30px !important;
  }

  .el-pagination >>> button.btn-prev,
  .el-pagination >>> button.btn-next{
    color: rgba(0,0,0,.65);
    border: 1px solid #e5e5e5;
    background: #fff;
  }

  .el-pagination.is-background >>> .el-pager li{
    border: 1px solid #e5e5e5;
    background: #fff;
    line-height: 26px;
    transition: arr .3s;
  }

  .el-pagination.is-background >>> .el-pager li.active{
    color: #fff;
    background-color: #4688cc;
    border-color: #4688cc;
  }

  .el-pagination.is-background >>> .el-pager li:not(.active):hover {
    border-color: #4688cc;
    color: #4688cc;
  }
</style>
